
<template>
  <div class="header-box">
    <div class="header-cont">
      <div class="logo-l">
        <img :src="require('@/assets/imgs/index/logo.png')" alt="" />
        <span>HiSqure</span>
      </div>
      <div class="menu">
        <div class="menu-list">
          <z-city />
          <div class="color" v-for="(item, i) in list" :key="i + item">
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
      <div class="cart">
        <img :src="require('@/assets/imgs/index/cart.png')" alt="" />
      </div>
      <div class="bot">
        <div class="start" @click="statrt">发布活动</div>
      </div>
      <div class="logo-r">
        <img :src="require('@/assets/imgs/index/logo.png')" alt="" />
      </div>
    </div>
    <z-activity :showDialog.sync="showDialog" />
  </div>
</template>

<script>
import ZCity from "./city.vue"
import ZActivity from "./activity.vue"
export default {
  name: "z-header",
  components: { ZCity, ZActivity },
  data () {
    return {
      showDialog: false,
      list: ["关于我们", "博客", "直播回放", "社团/机构"]
    }
  },

  created () {

  },
  methods: {
    statrt () {
      this.showDialog = true
    }
  }
}

</script>
<style scoped lang='scss'>
.header-box {
  height: 100px;
  .header-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: $main_width;
    margin: 0 auto;
    color: $header_color;
    .menu {
      .menu-list {
        display: flex;
        & > div {
          padding: 0 8px;
          cursor: pointer;

          span {
            font-weight: 700;
          }
        }
        .color {
          &:hover {
            color: $main_color;
          }
        }
      }
    }
    .bot {
      width: 200px;
      .start {
        padding: 10px;
        text-align: center;
        font-weight: 700;
        line-height: 30px;
        border-radius: 80px;
        border: 1px solid $header_color;
        height: 30px;
        cursor: pointer;
      }
    }
    .logo-l {
      line-height: 100px;
      span {
        font-size: 20px;
        font-weight: 700;
      }
      img {
        vertical-align: middle;
        width: 40px;
        height: 40px;
        margin-right: 6px;
      }
    }
    .logo-r {
      img {
        vertical-align: middle;
        width: 40px;
        height: 40px;
      }
    }
  }
}
</style>